<script setup>
import { onMounted, ref, reactive } from 'vue'
const expand = ref(false)
const formRef = ref()
const formState = reactive({})
const onFinish = (values) => {
    console.log('Received values of form: ', values)
    console.log('formState: ', formState)
}
let myfield = [
    '关键字',
    '创建时间',
    '工单分类',
    '更新时间',
    '优先级',
    '受理客服组',
    '状态',
    '受理客服',
    '关键字'
]
// 示例数据数组
var workOrders = [
    {
        selected: false,
        id: '001',
        title: '标题1',
        priority: '高',
        status: '待处理',
        category: '类别1',
        creator: '张三',
        serviceTeam: '客服A组',
        servicePerson: '李四',
        createTime: '2023-01-01 10:00',
        updateTime: '2023-01-02 12:00'
    }
    // ...更多工单数据
]

// 函数用于将数据填充到表格中
function populateTable(data) {
    var tbody = document
        .getElementById('workOrderTable')
        .getElementsByTagName('tbody')[0]

    data.forEach(function (order) {
        var tr = document.createElement('tr')

        // 创建勾选框单元格
        var tdCheckbox = document.createElement('td')
        var checkbox = document.createElement('input')
        checkbox.type = 'checkbox'
        checkbox.checked = order.selected
        tdCheckbox.appendChild(checkbox)
        tr.appendChild(tdCheckbox)

        // 创建编号单元格
        var tdId = document.createElement('td')
        tdId.textContent = order.id
        tr.appendChild(tdId)

        // 创建标题单元格
        var tdTitle = document.createElement('td')
        tdTitle.textContent = order.title
        tr.appendChild(tdTitle)

        // 创建优先级单元格
        var tdPriority = document.createElement('td')
        tdPriority.textContent = order.priority
        tr.appendChild(tdPriority)

        // 创建状态单元格
        var tdStatus = document.createElement('td')
        tdStatus.textContent = order.status
        tr.appendChild(tdStatus)

        // 创建分类单元格
        var tdCategory = document.createElement('td')
        tdCategory.textContent = order.category
        tr.appendChild(tdCategory)

        // 创建创建人单元格
        var tdCreator = document.createElement('td')
        tdCreator.textContent = order.creator
        tr.appendChild(tdCreator)

        // 创建受理客服组单元格
        var tdServiceTeam = document.createElement('td')
        tdServiceTeam.textContent = order.serviceTeam
        tr.appendChild(tdServiceTeam)

        // 创建受理客服单元格
        var tdServicePerson = document.createElement('td')
        tdServicePerson.textContent = order.servicePerson
        tr.appendChild(tdServicePerson)

        // 创建创建时间单元格
        var tdCreateTime = document.createElement('td')
        tdCreateTime.textContent = order.createTime
        tr.appendChild(tdCreateTime)

        // 创建更新时间单元格
        var tdUpdateTime = document.createElement('td')
        tdUpdateTime.textContent = order.updateTime
        tr.appendChild(tdUpdateTime)

        // 将行添加到表格体中
        tbody.appendChild(tr)
    })
    // 当文档加载完毕时，填充表格

    // document.addEventListener('DOMContentLoaded', function() {
    //   console.log("55555555555555555555555555555555555")
    //   populateTable(workOrders);
    // });

    onMounted(() => {
        populateTable(workOrders)
    })
}
</script>
<template>
    <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState" @finish="onFinish">
        <a-row :gutter="24">
            <template v-for="i in 10" :key="i">
                <a-col v-show="expand || i <= 8" :span="6">
                    <a-form-item :name="`field-${i}`" :label="myfield[i - 1]"
                        :rules="[{ required: true, message: 'input something' }]">
                        <a-input v-model:value="formState[`field-${i}`]" placeholder="placeholder"></a-input>
                    </a-form-item>
                </a-col>
            </template>
        </a-row>
        <a-row>
            <a-col :span="24" style="text-align: right">
                <a-button type="primary" html-type="submit">搜索</a-button>
                <a-button style="margin: 0 8px" @click="() => formRef.resetFields()">重置</a-button>
                <a style="font-size: 12px" @click="expand = !expand">
                    <template v-if="expand">
                        <UpOutlined />
                    </template>
                    <template v-else>
                        <DownOutlined />
                    </template>
                    Collapse
                </a>
            </a-col>
        </a-row>
    </a-form>
    <div class="search-result-list">搜索结果列表</div>
    <table id="workOrderTable">
        <thead>
            <tr>
                <th>是否选中</th>
                <th>编号</th>
                <th>标题</th>
                <th>优先级</th>
                <th>状态</th>
                <th>分类</th>
                <th>创建人</th>
                <th>受理客服组</th>
                <th>受理客服</th>
                <th>创建时间</th>
                <th>更新时间</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="order in workOrders" :key="order.id">
                <td><input type="checkbox" v-model="order.selected" /></td>
                <td>{{ order.id }}</td>
                <td>{{ order.title }}</td>
                <td>{{ order.priority }}</td>
                <td>{{ order.status }}</td>
                <td>{{ order.category }}</td>
                <td>{{ order.creator }}</td>
                <td>{{ order.serviceTeam }}</td>
                <td>{{ order.servicePerson }}</td>
                <td>{{ order.createTime }}</td>
                <td>{{ order.updateTime }}</td>
            </tr>
            <!-- 工单数据将被插入这里 -->
        </tbody>
    </table>
</template>
<style>
[data-theme='dark'] .site-layout .site-layout-background {
    background: #141414;
}

#components-form-demo-advanced-search .ant-form {
    max-width: none;
}

#components-form-demo-advanced-search .search-result-list {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 2px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
}

[data-theme='dark'] .ant-advanced-search-form {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #434343;
    padding: 24px;
    border-radius: 2px;
}

[data-theme='dark'] #components-form-demo-advanced-search .search-result-list {
    border: 1px dashed #434343;
    background: rgba(255, 255, 255, 0.04);
}

table {
    width: 100%;
    border-collapse: collapse;
}

table,
td,
th {
    border: 2px solid rgb(233, 225, 225);
    /* 设置单元格边框 */
}

th,
td {
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}
</style>